<template>
	<view class="content">
		<!-- <view class="top-activity-plate"> -->
			<!-- top 活动标题/状态 -->
			<!-- <view class="activity-title-box">
				<text>{{activityInfo.title}}</text>
			</view>
			<view class="activity-status-box">
				<text v-if="activityInfo.sign==1||activityInfo.sign==2">可报名</text>
				<text v-if="activityInfo.sign==2">已报名</text>
				<text class="not" v-if="activityInfo.sign==0">不可报名</text>
			</view>
		</view>
		<view class="activity-info-box"> -->
			<!-- 活动信息 -->
			<!-- <view class="activity-item-box">
				<view class="activity-key-box">活动类型：</view>
				<view class="activity-value-box" v-if="activityInfo.type==1">普通活动</view>
				<view class="activity-value-box" v-if="activityInfo.type==2">试打会活动</view>
			</view>
			<view class="activity-item-box">
				<view class="activity-key-box">活动日期：</view>
				<view class="activity-value-box">{{activityInfo.date}}</view>
			</view>
			<view class="activity-item-box">
				<view class="activity-key-box">活动时间：</view>
				<view class="activity-value-box">{{activityInfo.time}}</view>
			</view> -->
			<!-- <view class="activity-item-box">
				<view class="activity-key-box">报名等级：</view>
				<view class="activity-value-box">{{activityInfo.grade}}</view>
			</view> -->
			<!-- <view class="activity-item-box">
				<view class="activity-key-box">报名截止时间：</view>
				<view class="activity-value-box">{{activityInfo.end_time}}</view>
			</view>
			<view class="activity-item-box">
				<view class="activity-key-box">所在城市：</view>
				<view class="activity-value-box">{{activityInfo.city}}</view>
			</view>
			<view class="activity-item-box">
				<view class="activity-key-box">活动地址：</view>
				<view class="activity-value-box">{{activityInfo.address}}</view>
			</view>
			<view class="activity-item-box">
				<view class="activity-key-box">活动内容：</view>
				
				<view class="activity-value-box">{{activityInfo.content}}</view>
			</view>
		</view> -->
		<!-- <view class="bottom-img-box">
			<image :src="activityInfo.image" mode=""></image>
		</view> -->
		<view class="activity-value-box" v-html="activityInfo.content"></view>
		<view class="bottom-plate-box">
			<!-- 底部按钮 -->
			<view class="bottom-but-box" @click="bindGo(1)" v-if="activityInfo.sign==1">立即报名</view>
			<view class="bottom-but-box active" @click="bindGo(2)" v-if="activityInfo.sign==0">不可报名</view>
			<view class="bottom-but-box" @click="bindGo(3)" v-if="activityInfo.type==1&&activityInfo.sign==2">联系客服</view>
			<view class="bottom-but-box" @click="bindGo(4)" v-if="activityInfo.type!=1&&activityInfo.sign==2&&activityInfo.is_trial==0">填写试打数据</view>
			<view class="bottom-but-box" @click="bindGo(5)" v-if="activityInfo.type!=1&&activityInfo.sign==2&&activityInfo.is_trial==1">查看试打数据</view>
		</view>
		<!-- 长按识别二维码 -->
		<u-modal v-model="show7" title="长按识别二维码" @confirm="confirm">
			<view class="slot-content"><image class="official-account" :show-menu-by-longpress="true" :src="activityInfo.kf_qrcode"></image></view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				activityInfo:{},//活动信息
				activityId:0,//活动ID,
				show7: false,
			}
		},
		onLoad(option){
			uni.showLoading({title:"加载中"});
			this.activityId = option.activityId;
		},
		onShow() {
			this.$u.api.activityDetailApi({id:this.activityId}).then(res=>{
				if(res.code==1){
					console.log('活动详情：',res);
					this.activityInfo = res.data;
				}
			});
		},
		methods:{
			bindGo(status){
				if(status==1){
					this.$gourl(`./activitySignUp?activityId=${this.activityInfo.activity_id}&type=${this.activityInfo.type}`); //活动报名
				}else if(status==2){
					this.$showToast('不可报名');
					return
				}else if(status==3){
					this.show7 = true
					//this.$showToast('已报名');
					return
				}else if(status==4){
					this.$gourl(`./dataWrite?activityId=${this.activityInfo.activity_id}&type=${this.activityInfo.type}`); //数据填写
				}else if(status==5){
					this.$gourl(`./checkData?activityId=${this.activityInfo.activity_id}`); //查看试打数据
				}
			},
			confirm() {
				this.show7 = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: calc(100vh - 120rpx);
		overflow: hidden;overflow-y: auto;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		padding: 20rpx;
		.top-activity-plate{
			padding: 20rpx;
			margin-bottom: 20rpx;
			.activity-title-box{
				font-size: 38rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 30rpx;
			}
			.activity-status-box{
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
				text{
					display: inline-block;
					white-space: nowrap;
					margin-right: 20rpx;
					padding: 5rpx 15rpx;
					border-radius: 10rpx;
					background: #000;
				}
				.not{
					background: #EDEDED !important;
					color: #999999 !important;
				}
			}
		}
		.activity-info-box{
			padding: 20rpx;
			margin-bottom: 30rpx;
			.activity-item-box{
				padding: 20rpx 0;
				display: flex;
				font-size: 30rpx;
				font-weight: 400;
				.activity-key-box{
					flex: 0.4;
					color: #999999;
				}
				.activity-value-box{
					flex: 0.6;
					color: #333333;
				}
			}
		}
		.bottom-img-box{
			padding: 20rpx;
			line-height: 0;
			image{width: 100%; height: 460rpx;}
		}
		.bottom-plate-box{
			position: fixed;bottom: 0;
			width: 100%;
			padding:20rpx;
			background: #fff;
			    left: 0;
			    right: 0;
		.bottom-but-box{
			width: 100%;
			padding: 25rpx 0;
			background: #000;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			border-radius: 50rpx;
			}
		.active{
			background: #EDEDED !important;
			color: #999999 !important;
		}
		}
		// 关注公众号
		.slot-content {
			display: flex;
			align-items: center;
			justify-content: center;
			.official-account {
				width: 400rpx;
				height: 400rpx;
			}
		}
	}
</style>